<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <e-cellbox middle class="coach-manage">
        <e-cell-item>
          <e-heading grade='1'>教练列表</e-heading>
        </e-cell-item>
        <e-cell-item class="tr small weak" v-if="roleType != 99">
          <el-button size="small" @click="handleAddCoach"  type="primary">新增教练</el-button>  
        </e-cell-item>
      </e-cellbox>
      <div class="search-mine" v-if="roleType != 99">
        <el-form v-bind="getFormProps()" :inline="true">
          <el-form-item label="姓名：">
            <el-input size="small" v-model.trim="query.name" placeholder="请输入搜索的姓名"></el-input>
          </el-form-item>
          <el-button size="small" type="primary-plain" native-type="submit">搜索</el-button>
        </el-form>
      </div>
      <div class="coach-table">
        <el-table 
          v-bind="getTableProps()"
          :data="train_coach_list.list" 
          tooltip-effect="dark" 
          empty-text="暂无教练"
          @sort-change="handelOrder">
          <el-table-column 
            prop="name"
            label="姓名" 
            width="100"
            :sortable="roleType != 99 ? 'custom' : false" 
            align="center">
            <template slot-scope="scope">
              <span class="link" @click="handleDetail(scope.$index, scope.row)">
                {{ scope.row.name }}
              </span>
            </template>
          </el-table-column>
          <el-table-column 
            label="性别" 
            align="center">
            <template slot-scope="scope">
              <span>{{scope.row.sex === 1 ? '男': '女'}}</span>  
            </template>
          </el-table-column>
          <el-table-column 
            prop="age" 
            label="年龄" 
            align="center">
            <template slot-scope="scope">
              {{scope.row.age === '' ? '未知': scope.row.age}}
            </template>
          </el-table-column>
          <el-table-column 
            prop="country" 
            label="国籍" 
            align="center">
          </el-table-column>
          <el-table-column 
            prop="operate" 
            label="操作" 
            width="105" 
            align="center">
            <template slot-scope="scope">
              <p><el-button @click="handleEdit(scope.$index, scope.row)" type="link" v-if="roleType != 99">编辑</el-button></p>
              <p><el-button @click="handleVacate(scope.$index, scope.row)" v-if="scope.row.classNum && scope.row.properties != 2" type="link">请假</el-button></p>
              <p><el-button @click="handleCancelVacate(scope.$index, scope.row)" type="link" v-if="scope.row.needCancelLeave === 1 && scope.row.properties != 2">撤销请假</el-button></p>
              <p><el-button @click="handleRemove(scope.$index, scope.row, $event)" type="link" v-if="roleType != 99" :loading="loading">删除</el-button></p>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-bind="getPaginationProps(train_coach_list)"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          >
        </el-pagination>
        <Leave-coach :isVacate="isVacate" :coachInfo="coachInfo" v-if="isClose" v-model="isClose" @success="handleSuccessList" />
      </div>
    </div>
  </div>
</template>

<script>
import { pagingList } from 'utils/mixins'
import LeaveCoach from './components/LeaveCoach'
import { mapGetters } from 'vuex'
import trainApi from 'api/train'
export default {
  mixins: [pagingList],
  components: {
    LeaveCoach
  },
  data () {
    return {
      isVacate: false, // 请假or撤销请假
      isClose: false,
      roleType: '',
      coachInfo: {},
      name: '',
      order: true, // 升序or降序
      query: this.getQuery(),
      loading: false
    }
  },
  mounted () {
    this.roleType = localStorage.getItem('role_type')
    this.$store.dispatch('train_compus_selection')
  },
  computed: {
    ...mapGetters({
      train_coach_list: 'train_coach_list' // 教练列表数据
    })
  },
  methods: {
    handleAddCoach () {
      this.$router.push({name: 'addCoach'})
    },
    handelOrder (column, prop, order) {
      this.order = !this.order
      let query = Object.assign({order: this.order ? 'ASC' : 'DESC'}, this.query)
      this.fetch(query)
    },
    handleDetail (index, row) {
      this.$router.push('/training/coach/detail/' + row.id)
    },
    handleEdit (index, row) {
      this.$router.push({name: 'editCoach', query: {id: row.id}})
    },
    fetch (query) {
      this.$store.dispatch('train_coach_list', query)
    },
    handleVacate (index, row) { // 展示请假
      this.coachInfo = Object.assign({isLeave: true}, row)
      this.isClose = true
      this.isVacate = true
    },
    handleCancelVacate (index, row) { // 展示撤销请假
      this.coachInfo = Object.assign({isLeave: false}, row)
      this.isClose = true
      this.isVacate = false
    },
    handleSuccessList () {
      this.fetch(this.query)
    },
    handleRemove (index, row, event) {
      if (row.deletable === 1) {
        this.$confirm('删除后将不可恢复，确认删除该教练吗？', '温馨提示', {type: 'warning'}).then(() => {
          trainApi.removeCoach({id: row.id}, {
            context: event.target,
            successMsg: '删除成功!'
          }).then(res => {
            this.fetch(this.query)
          })
        })
      } else {
        this.$confirm('该教练有课，不可删除！', '温馨提示', {
          confirmButtonText: '我知道了',
          showCancelButton: false,
          type: 'warning'
        })
      }
    }
  }
}
</script>

<style lang="scss">
.content {
  .coach-manage {
    margin-top: -25px;
  }
}
</style>
